﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
     <!--[if lte IE 6]>
  
    <link href="css/bootstrap-ie6.min.css" rel="stylesheet" />
    <link href="css/ie.css" rel="stylesheet" />
      <![endif]-->
</head>
<body>
    <ul class="nav nav-list bs-docs-sidenav" id="accordion3">
        <li><a id="sidebar-1" href="#">1</a></li>
        <li class="accordion-group">
            <a id="sidebar-2" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree1">2</a>
            <ul id="collapseThree1" class="nav nav-list  collapse">
                <li><a  id="sidebar-3" href="#">1</a></li>
                <li>
                    <a  id="sidebar-4" href="#">2</a>

                </li>
                <li><a   id="sidebar-5"href="#">3</a></li>
                <li><a  id="sidebar-6" href="#">4</a></li>
                <li><a  id="sidebar-7" href="#">5</a></li>
            </ul>
        </li>
        <li><a href="#">3</a></li>
        <li  class="accordion-group"><a data-toggle="collapse"  data-parent="#accordion3" href="#Ul1" >4</a>
            <ul id="Ul1" class="nav nav-list collapse">
                <li><a href="#">1</a></li>
                <li>
                    <a href="#">2</a>

                </li>
                <li ><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </li>
        <li><a href="#">5</a></li>
    </ul>
    
    <script type="text/javascript" src="../../Scripts/jquery-1.8.3.min.js"></script>
     <script type="text/javascript">
             sidebar("3");
         //要显示的a的id号，不需要加sidebar-
         function sidebar(tabhref) {
             tabhref = "sidebar-" + tabhref;
             //当前选中项
             var tab = $("#" + tabhref);
             //所有子ul
             var childuls = $("#accordion3 li ul");
             //所有存在子ul的同级a标记
             var hrchilds = $("#accordion3>li:has(ul)>a");
             //选中项添加样式
             tab.parent().addClass("active");
             if (tab.parents("li").length>1) {
                 tab.parent().parent().addClass("in").parent().addClass("active");
             }
             //===============存在子标签
             $("<i class=\"icon-chevron-right\"></i>").appendTo(hrchilds);//添加箭头
             
         }
    </script>

    <script src="js/bootstrap.min.js"></script>
   <!-- bsie js 补丁只在IE6中才执行 -->  
    <!--[if lte IE 6]>
  
    <script src="js/bootstrap-ie.js"></script>
  <![endif]-->
   
</body>
</html>
